<%--
  Created by IntelliJ IDEA.
  User: HP
  Date: 2021/11/27
  Time: 18:35
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
	<title>我的订单</title>
	<%
		pageContext.setAttribute("APP_PATH", request.getContextPath());
	%>
	<link href="${APP_PATH}/static/bootstrap-3.4.1-dist/css/bootstrap.min.css" rel="stylesheet">
	<link href="${APP_PATH}/static/css/common_style.css" rel="stylesheet">
	<link href="${APP_PATH}/static/css/index.css" rel="stylesheet">
</head>
<body>
<%@ include file="/jsp/nav.jsp" %>
<div class="container-fluid body-home">
	<div class="container main">
		<h1>我的订单</h1>
		<c:forEach items="${orders}" var="order">
			<div class="panel panel-default">
				<div class="panel-body">
					<div class="row">
						<div class="col-lg-3">
							<a class="thumbnail">
								<c:if test="${empty order.picture}">
									<img src="${APP_PATH}/static/img/default.jpg" alt="图片">
								</c:if>
								<c:if test="${!(empty order.picture)}">
									<img src="${APP_PATH}/static/${order.picture}" alt="图片">
								</c:if>
							</a>
						</div>
						<div class="col-lg-9">
							<div class="col-lg-8">
								<div class="col-lg-12">
									<h2>${order.house_name}</h2>
									<p>下单时间：${order.date_time}</p>
									<p>${order.description}</p>
								</div>
							</div>
							<div class="col-lg-4">
								<c:choose>
									<c:when test="${order.status == '失效'}">
										<h3 class="text-center">已被抢定</h3>
										<div class="col-lg-6 col-lg-offset-3 ">
											<button class="btn btn-danger btn-block btn-lg"
													onclick="del(${order.order_id})">删除
											</button>
										</div>
									</c:when>
									<c:when test="${order.status == '预定'}">
										<h3 class="text-center">等待缴费</h3>
										<div class="col-lg-6">
											<button class="btn btn-primary btn-lg btn-block"
													onclick="pay(${order.order_id})">缴费
											</button>
										</div>
										<div class="col-lg-6">
											<button class="btn btn-warning btn-lg btn-block"
													onclick="giveup(${order.order_id})">放弃
											</button>
										</div>
									</c:when>
									<c:when test="${order.status == '已缴费'}">
										<h3 class="text-center">已缴费</h3>
									</c:when>
								</c:choose>
							</div>
						</div>
					</div>
				</div>
			</div>
		</c:forEach>
	</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"
		integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ"
		crossorigin="anonymous"></script>
<script src="${APP_PATH}/static/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
<script>
    function pay(oid) {
        $.ajax({
            url: '${APP_PATH}/payOrder',
            type: 'POST',
            dataType: 'text',
            data: {
                order_id: oid,
            },
            success: function () {
                alert("成功")
                location.reload()
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert("失败，状态码：" + XMLHttpRequest.status)
            }
        });
    }

    function del(oid) {
        $.ajax({
            url: '${APP_PATH}/delOrder',
            type: 'POST',
            dataType: 'text',
            data: {
                order_id: oid,
            },
            success: function () {
                alert("成功")
                location.reload()
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert("失败，状态码：" + XMLHttpRequest.status)
            }
        });
    }

    function giveup(oid) {
        $.ajax({
            url: '${APP_PATH}/giveupOrder',
            type: 'POST',
            dataType: 'text',
            data: {
                order_id: oid,
            },
            success: function () {
                alert("成功")
                location.reload()
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert("失败，状态码：" + XMLHttpRequest.status)
            }
        });
    }
</script>
</body>
</html>
